{% extends "base.html" %}
{% load static %}

    {% block title %}
        <title>珠宝管理系统 - 登录</title>
    {% endblock %}

    {% block link %}
        <!-- 样式引用 -->
        <link href="{% static '/css/main.css' %}" rel="stylesheet">
        <link href="{% static '/css/auth.css' %}" rel="stylesheet">

    {% endblock %}

    {% block style %}
        <style>
            .login-container {
                background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
                min-height: 100vh;
            }
            .login-card {
                border-radius: 15px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
                backdrop-filter: blur(10px);
            }
        </style>
    {% endblock %}

{% block main %}
{#<main class="main-content" id="mainContent"></main>#}
<body class="login-container">
    <div class="container">
        <div class="row justify-content-center align-items-center min-vh-100">
            <div class="col-md-6 col-lg-4">
                <!-- 登录卡片 -->
                <div class="card login-card bg-dark text-white pt-3">
                    <div class="card-header border-0 bg-transparent">
                        <h4 class="text-center mb-0 d-flex align-items-center justify-content-center gap-2">
                            <img src="{% static 'image/logo.jpg' %}" alt="企业LOGO" class="mb-0" style="height: 40px;">
                            <span>企业数字化平台</span>
                        </h4>
                    </div>

                    <div class="card-body">
                        <!-- 登录方式切换 -->
                        <ul class="nav nav-pills mb-4 ms-2" id="loginTabs">
                            <li class="nav-item">
                                <a class="nav-link active" href="#pwdLogin">密码登录</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#smsLogin">短信登录</a>
                            </li>
                        </ul>


                        <div class="tab-content">
                            <!-- 密码登录表单 -->
                            <div class="tab-pane fade show active" id="pwdLogin">
                                <form id="pwdLoginForm">
                                    {% csrf_token %}
                                    <div class="mb-3 ms-4 me-4">
                                        <label class="form-label">用户名/手机号</label>
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-person-badge"></i>
                                            </span>
                                            <input type="text"
                                                   class="form-control"
                                                   id="username"
                                                   name="username"
                                                   autocomplete="off"
                                                   readonly
                                                   onfocus="this.removeAttribute('readonly')"
                                                   placeholder="用户名/手机号">
                                        </div>
                                    </div>
                                    <div class="mb-3 ms-4 me-4">
                                        <label class="form-label">密码</label>
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-lock"></i>
                                            </span>
                                            <input type="password"
                                                   class="form-control"
                                                   id="password"
                                                   name="password"
                                                   autocomplete="off"
                                                   readonly
                                                   onfocus="this.removeAttribute('readonly')"
                                                   placeholder="请输入密码">
                                            <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary custom-shrink">
                                        <i class="bi bi-box-arrow-in-right me-2"></i>登录
                                    </button>
                                </form>
                            </div>

                            <!-- 短信登录表单 -->
                            <div class="tab-pane fade" id="smsLogin">
                                <form id="smsLoginForm">
                                    {% csrf_token %}
                                    <div class="mb-3 ms-4 me-4">
                                        <label class="form-label">手机号</label>
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-phone"></i>
                                            </span>
                                            <input type="tel"
                                                   class="form-control"
                                                   id="phone"
                                                   autocomplete="off"
                                                   readonly
                                                   onfocus="this.removeAttribute('readonly')"
                                                   placeholder="输入手机号"
                                                   autofocus="autofocus"
                                            >
                                        </div>
                                    </div>
                                    <div class="mb-3 ms-4 me-4">
                                        <label class="form-label">验证码</label>
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-shield-lock"></i>
                                            </span>
                                            <input type="text"
                                                   class="form-control"
                                                   id="smsCode"
                                                   autocomplete="off"
                                                   readonly
                                                   onfocus="this.removeAttribute('readonly')"
                                                   placeholder="输入验证码">
                                            <button class="btn btn-outline-primary btn-sm" type="button" id="getSMSCode">
                                                获取验证码  <!-- <span id="countdown"></span> -->
                                            </button>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary custom-shrink">
                                        <i class="bi bi-box-arrow-in-right me-2"></i>登录
                                    </button>

                                </form>
                            </div>

                        </div>

                        <!-- 辅助链接 -->
{#                        <div class="mt-3 mb-3 text-center">#}
{#                            <a href="#forgotPassword" class="small text-info">忘记密码？</a>#}
{#                        </div>#}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 提示小模态框 -->
    <div class="modal fade" id="warningModal_login" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-sm">
    <div class="modal-content" style="background-color: #ffe6f0; border: 2px solid #ff99c2;">
      <div class="modal-body text-center py-1">
        <p class="mt-1 mb-1 text-dark" style="font-size: 20px;" id="dynamicMessage_login">
          需要提示的信息:message变量
        </p>
      </div>
    </div>
  </div>
</div>

    <!-- 脚本引用 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.min.js"></script>
{#    <script src="{% static '/js/auth.js' %}"></script>  <!-- 提示框与拦截器和相应器 -->#}
    <script src="{% static '/js/login.js' %}"></script>

</body>
<script>

</script>
{% endblock %}




